/*
 * @Author: your name
 * @Date: 2021-05-19 17:22:23
 * @LastEditTime: 2021-06-06 13:46:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /xiangpan-admin/src/pages/home/scheduModal/index.tsx
 */
import { IFormTypeEnum } from '@/components/form/formComponent';
import { Button, DatePicker, Form, Input, Modal, Switch } from 'antd';
import HeaderForm from '@/components/form';

import React, { useEffect } from 'react';
import { useRequest } from 'umi';
import {
  appointment_project,
  get_appointment_user,
  get_box_staff,
  get_store_projects,
} from '@/services/pages';
import useObj from '@/use/useObj';
import { IForm } from '../../../components/form/formComponent';
import moment from 'moment';
import { IJudge, IS_TRUE } from '@/enum';
import { Select } from 'antd';
interface IProps {
  visible: boolean;
  row: any;
  close: () => void;
  refresh: () => void;
}
interface IProps {}
interface IObj {
  arrangeObj: {
    plan_start_time: number;
    project_id: string;
  } | null;
  box_list: { box_id: number; box_name: string }[];
}
const ScheduleModal = (props: IProps) => {
  const [obj, setObj] = useObj<IObj>({
    arrangeObj: null,
    box_list: [],
  });

  const getVipList = useRequest(() => get_appointment_user({}));
  const storeProject = useRequest(() => get_store_projects({}));
  const { run: submit } = useRequest(appointment_project, {
    manual: true,
  });
  const [form] = Form.useForm();

  const boxStaff = {
    plan_start_time: moment(obj.arrangeObj?.plan_start_time).unix(),
    project_id: obj.arrangeObj?.project_id,
  };
  const { data, error, loading, run } = useRequest(
    () => get_box_staff(boxStaff),
    {
      manual: true,
    },
  );

  useEffect(() => {
    if (!obj.arrangeObj?.plan_start_time || !obj.arrangeObj?.project_id) return;
    run();
  }, [obj.arrangeObj?.plan_start_time, obj.arrangeObj?.project_id]);

  const onFinish = async (values) => {
    values.plan_start_time = moment(values.plan_start_time).unix();
    values.is_clock = values.is_clock ? 1 : 0;

    await submit(values);
    props.close();
    props.refresh();

    console.log(values, 'values==');
  };
  return (
    <Modal
      maskClosable={false}
      visible={props.visible}
      title={'排班'}
      footer={null}
      onCancel={props.close}
    >
      <Form
        form={form}
        labelCol={{ span: 4 }}
        onFinish={onFinish}
        onValuesChange={(value, allValues) => {
          console.log(value, 'vaue==');

          setObj({ arrangeObj: allValues });
        }}
      >
        <Form.Item
          label="开始时间"
          name="plan_start_time"
          rules={[{ required: true }]}
        >
          <DatePicker
            showTime
            placeholder={`请选择开始时间`}
            onChange={() => {
              form.setFieldsValue({ box_id: undefined, staff_id: undefined });
            }}
          />
        </Form.Item>
        <Form.Item
          label="项目名称"
          name="project_id"
          rules={[{ required: true }]}
        >
          <Select
            optionFilterProp="label"
            placeholder="请选择"
            onChange={() => {
              form.setFieldsValue({ box_id: undefined, staff_id: undefined });
            }}
          >
            {storeProject?.data?.results.map((row, index) => {
              return (
                <Select.Option
                  key={index}
                  value={row.project_id}
                  label={row.project_name}
                >
                  {row.project_name}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item label="可选房间" name="box_id" rules={[{ required: true }]}>
          <Select optionFilterProp="label" placeholder="请选择">
            {data?.results.boxList.map((row, index) => {
              return (
                <Select.Option
                  key={index}
                  value={row.box_id}
                  label={row.box_name}
                >
                  {row.box_name} ({row.num}/{row.box_bunk})
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          label="可选技师"
          name="staff_id"
          rules={[{ required: true }]}
        >
          <Select optionFilterProp="label" placeholder="请选择">
            {data?.results.staffList.map((row, index) => {
              return (
                <Select.Option
                  key={index}
                  value={row.staff_id}
                  label={row.staff_name}
                >
                  {row.staff_name}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item label="会员名称" name="user_id">
          <Select optionFilterProp="label" placeholder="请选择">
            {getVipList.data?.results.map((row, index) => {
              return (
                <Select.Option
                  key={index}
                  value={row.user_id}
                  label={row.user_name}
                >
                  {row.user_name}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item label="是否点钟" name="is_clock">
          <Switch />
        </Form.Item>

        <Form.Item>
          <Button htmlType="submit" type="primary" style={{ marginLeft: 80 }}>
            确定
          </Button>
        </Form.Item>
      </Form>

      {/* <HeaderForm
        labelwidth={80}
        layout="horizontal"
        list={List}
        onValuesChange={(e, allValues) => {
          setObj({ arrangeObj: allValues });
        }}
        onSubmit={onSubmit}
      /> */}
    </Modal>
  );
};
export default ScheduleModal;
